<template>
  <div class="collections">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    
    <van-tabs v-model:active="activeTab" @change="onTabChange">
      <van-tab title="帖子" name="posts">
        <div class="collection-list">
          <div
            v-for="item in collectedPosts"
            :key="item.id"
            class="collection-item"
            @click="goToPost(item.id)"
          >
            <div class="item-header">
              <van-image
                class="avatar"
                :src="item.avatar || '/default-avatar.png'"
                round
                width="32"
                height="32"
              />
              <div class="user-info">
                <div class="username">{{ item.username }}</div>
                <div class="time">{{ formatTime(item.createTime) }}</div>
              </div>
              <van-icon
                name="delete-o"
                class="delete-btn"
                @click.stop="removeCollection('post', item.id)"
              />
            </div>
            <div class="item-content">
              <h4 class="title">{{ item.title }}</h4>
              <p class="content">{{ item.content }}</p>
              <div class="stats">
                <span><van-icon name="good-job-o" /> {{ item.likeCount }}</span>
                <span><van-icon name="chat-o" /> {{ item.commentCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      
      <van-tab title="模板" name="templates">
        <div class="collection-list">
          <div
            v-for="item in collectedTemplates"
            :key="item.id"
            class="collection-item"
            @click="goToTemplate(item.id)"
          >
            <div class="item-header">
              <div class="template-icon">
                <van-icon name="description" />
              </div>
              <div class="template-info">
                <div class="template-name">{{ item.name }}</div>
                <div class="template-category">{{ item.category }}</div>
              </div>
              <van-icon
                name="delete-o"
                class="delete-btn"
                @click.stop="removeCollection('template', item.id)"
              />
            </div>
            <div class="item-content">
              <p class="description">{{ item.description }}</p>
              <div class="stats">
                <span><van-icon name="eye-o" /> {{ item.viewCount }}</span>
                <span><van-icon name="star-o" /> {{ item.collectCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      
      <van-tab title="案例" name="cases">
        <div class="collection-list">
          <div
            v-for="item in collectedCases"
            :key="item.id"
            class="collection-item"
            @click="goToCase(item.id)"
          >
            <div class="item-header">
              <div class="case-icon">
                <van-icon name="balance" />
              </div>
              <div class="case-info">
                <div class="case-title">{{ item.title }}</div>
                <div class="case-type">{{ item.type }}</div>
              </div>
              <van-icon
                name="delete-o"
                class="delete-btn"
                @click.stop="removeCollection('case', item.id)"
              />
            </div>
            <div class="item-content">
              <p class="summary">{{ item.summary }}</p>
              <div class="stats">
                <span class="result">{{ item.result }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    
    <van-empty
      v-if="currentList.length === 0"
      description="暂无收藏内容"
      image="search"
    />
  </div>
</template>

<script>
export default {
  name: 'Collections',
  data() {
    return {
      activeTab: 'posts',
      collectedPosts: [],
      collectedTemplates: [],
      collectedCases: []
    }
  },
  computed: {
    currentList() {
      switch (this.activeTab) {
        case 'posts':
          return this.collectedPosts
        case 'templates':
          return this.collectedTemplates
        case 'cases':
          return this.collectedCases
        default:
          return []
      }
    }
  },
  created() {
    this.loadCollections()
  },
  methods: {
    loadCollections() {
      // 模拟收藏数据
      this.collectedPosts = [
        {
          id: 1,
          title: '劳动合同纠纷处理经验分享',
          content: '最近处理了一起劳动合同纠纷案件，分享一些经验...',
          username: '法律顾问',
          avatar: '',
          createTime: new Date(),
          likeCount: 25,
          commentCount: 12
        }
      ]
      
      this.collectedTemplates = [
        {
          id: 1,
          name: '劳动仲裁申请书',
          category: '劳动纠纷',
          description: '标准的劳动仲裁申请书模板，包含完整的申请要素',
          viewCount: 1250,
          collectCount: 89
        }
      ]
      
      this.collectedCases = [
        {
          id: 1,
          title: '某公司拖欠工资案',
          type: '劳动纠纷',
          summary: '员工因公司拖欠工资3个月申请劳动仲裁，最终获得全额赔偿',
          result: '胜诉'
        }
      ]
    },
    onTabChange(name) {
      this.activeTab = name
    },
    formatTime(time) {
      return new Date(time).toLocaleDateString()
    },
    goToPost(id) {
      this.$router.push(`/community/post/${id}`)
    },
    goToTemplate(id) {
      this.$router.push(`/templates/detail/${id}`)
    },
    goToCase(id) {
      this.$router.push(`/cases/${id}`)
    },
    removeCollection(type, id) {
      this.$dialog.confirm({
        title: '确认删除',
        message: '确定要取消收藏吗？'
      }).then(() => {
        switch (type) {
          case 'post':
            this.collectedPosts = this.collectedPosts.filter(item => item.id !== id)
            break
          case 'template':
            this.collectedTemplates = this.collectedTemplates.filter(item => item.id !== id)
            break
          case 'case':
            this.collectedCases = this.collectedCases.filter(item => item.id !== id)
            break
        }
        this.$toast.success('已取消收藏')
      }).catch(() => {
        // 取消操作
      })
    }
  }
}
</script>

<style scoped>
.collections {
  background: #f5f5f5;
  min-height: 100vh;
}

.collection-list {
  padding: 0 15px;
}

.collection-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  margin-right: 10px;
}

.template-icon,
.case-icon {
  width: 32px;
  height: 32px;
  background: #1989fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 10px;
}

.user-info,
.template-info,
.case-info {
  flex: 1;
}

.username,
.template-name,
.case-title {
  font-weight: bold;
  margin-bottom: 2px;
}

.time,
.template-category,
.case-type {
  font-size: 12px;
  color: #999;
}

.delete-btn {
  color: #999;
  font-size: 18px;
}

.item-content .title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
}

.item-content .content,
.item-content .description,
.item-content .summary {
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #999;
}

.stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.result {
  background: #52c41a;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}
</style>